
<template>
  <div class="header">
    <div class="r-content">
      <el-dropdown placement="bottom-end">
        <span class="el-dropdown-link">
          <img :src="getImageUrl(user)" class="user" />
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="goToUser">个人中心</el-dropdown-item>
            <el-dropdown-item @click="handleLogout">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>
  
  <script setup>
  import { ref } from 'vue'
  import { useRouter } from 'vue-router'
  import {
    User,
    Setting,
    SwitchButton
  } from '@element-plus/icons-vue'
  const router = useRouter()
  const getImageUrl = (user)=>{
    return new URL(`@/assets/images/admin.png`, import.meta.url).href
  }
  const showDropdown = ref(false)
  const goToUser = () => {
  router.push('/user') // 跳转到用户中心页面
}

const handleLogout = () => {
  router.push('/login') 
}
  </script>
  
  <style scoped>
  .header {
    display: flex;
    justify-content: flex-end; /* 改为flex-end使内容靠右 */
    align-items: center;
    height: 60px;
    padding: 0 20px;
    background-color: #fff;
    box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
    position: relative; /* 添加相对定位 */
  }
  
  .r-content {
    position: absolute; /* 绝对定位 */
    right: 20px; /* 距离右侧20px */
    top: 10px; /* 距离顶部10px */
  }
  
  .user {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
  }
  
  /* 调整下拉菜单位置 */
  /* :deep(.el-dropdown__popper) {
    top: 50px !important;
    right: 10px !important;
    left: auto !important;
  } */
  </style>